<template>
    <div class="pd20">
        <h5 class="fs18">车辆信息</h5>
        <div class="line mt18"></div>
        <div class="flex mt18">
            <div class="flex1">车牌号：京LEU765</div>
            <div class="flex1">车辆识别代码：LESHS872HANSKDY83</div>
            <div class="flex1">主机厂：吉利</div>
            <div class="flex1">车辆状态：安全</div>
        </div>
        <div class="line mt18"></div>
        <el-tabs v-model="activeName" @tab-click="changeTab">
            <el-tab-pane label="避灾历史" name="operationList">
                <el-table class="sd" :data="tableData" @selection-change="changeSelection" v-loading="loading">
                    <el-table-column align="center" prop="szDate" label="受灾时间段"></el-table-column>
                    <el-table-column align="center" prop="szType" label="受灾天气类型"></el-table-column>
                    <el-table-column align="center" prop="szPosition" label="受灾地理位置"></el-table-column>
                    <el-table-column align="center" prop="yjDate" label="预警时间段"></el-table-column>
                    <el-table-column align="center" prop="bxType" label="避险通知方式"></el-table-column>
                    <el-table-column align="center" prop="bxResult" label="避险结果"></el-table-column>
                    <el-table-column align="center" prop="bonus" label="奖励金"></el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t fr mt20"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="投保历史" name="operationDate">
                <el-table class="sd" :data="tableData2" @selection-change="changeSelection" v-loading="loading">
                    <el-table-column align="center" prop="bdNums" label="保单号"></el-table-column>
                    <el-table-column align="center" prop="bzDate" label="保障时间" width="300"></el-table-column>
                    <el-table-column align="center" prop="bxStatus" label="保险状态"></el-table-column>
                    <el-table-column align="center" prop="gxDate" label="购险日期"></el-table-column>
                    <el-table-column align="center" prop="area" label="投保地区"></el-table-column>
                    <el-table-column align="center" prop="channel" label="销售渠道"></el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t fr mt20"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total2"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: 'depotDetail',
        data () {
            return {
                // tab页标签
                activeName: 'operationList',
                // 列表查询条件
                queryForm: {
                    brand: '',
                    activityTitle: '',
                    activityStatus: '',
                    activityId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                // total: 0,
                tableData: [],
                tableData2: [],
                tableSelection: [],
                // 基础数据列表
                baseList: {
                    GWBrand: [], // 长城品牌
                    activityList: [], // 活动入口
                    statusList: [ // 活动状态
                        { key: 0, value: '未上线' },
                        { key: 1, value: '已上线' },
                        { key: 2, value: '已下线' }
                    ]
                },
                userData: {},
                loading: false
            }
        },
        created () {
            this.queryList()
        },
        computed: {
            total() {
                return this.tableData.length;
            },
            total2() {
                return this.tableData2.length;
            }
        },
        methods: {
            // 点击查询置为第一页
            queryList1 () {
                this.queryForm.pageNum = 1
                this.queryList()
            },
            // 查询列表
            queryList () {
                let cData = [], cData2 = [];
                    cData = [
                        {"szDate": "2020-07-21 15:00-17:00","szType": "冰雹","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险成功","bonus": "500元"},
                        {"szDate": "2020-07-21 15:00-17:00","szType": "冰雹","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险失败","bonus": "0元"},
                        {"szDate": "2020-07-21 15:00-17:00","szType": "道路积水","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险成功","bonus": "0元"},
                        {"szDate": "2020-07-21 15:00-17:00","szType": "道路积水","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "短信","bxResult": "避险成功","bonus": "500元"},
                    ];
                    cData2 = [
                        {"bdNums": "PDAA201861270000031519","bzDate": "2020年6月21日0:00时起至2021年6月20日24:00时止","bxStatus": "保障中","gxDate": "2020年4月2日","area": "北京市西城区","channel": "避灾成功"},
                        {"bdNums": "PDAA201861270000031519","bzDate": "2020年6月21日0:00时起至2021年6月20日24:00时止","bxStatus": "已脱保","gxDate": "2020年4月2日","area": "北京市西城区","channel": "避灾失败"},
                    ]
                this.tableData = cData;
                this.tableData2 = cData2;
            },
            // tab页转换
            changeTab (tab) {
                if (tab.name === 'operationDate') {
                    // this.$refs.schedule.getActivitySchedule()
                } else {
                    // this.getBaseDataList()
                }
            },
            reset () {
                this.queryForm.brand = ''
                this.queryForm.activityId = ''
                this.queryForm.activityStatus = ''
                this.queryForm.activityTitle = ''
                this.queryForm.pageNum = 1
                this.queryForm.pageSize = 10
                this.queryList()
            },
            // 多选列表项
            changeSelection (val) {
                this.tableSelection = val
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            }
        }
    }
</script>

<style scoped>

</style>
